<template>
	<ls-page page-class="z-overspread-page" title="" id="page">
		<view class="centerMy-container">
			<view class="centerMy-container-main">
				<view class="main-cell">
					<view class="main-cell-left">头像</view>
					<view class="main-cell-right">
						<!-- <button v-if="canIUseNicknameComp && !hasUserInfo" class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"> -->
						<up-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="6" width="105" height="105" multiple>
							<image  class="right-img" :src="postForm.attachment ? postForm.attachment : avatarUrl"></image>
						</up-upload>
						<!-- <image class="right-img" :src="postForm.attachment ? postForm.attachment : avatarUrl"></image> -->
						<view class="right-icon"></view>						<!-- </button> -->
						<!-- <image class="right-img" src="https://oss.jtmckj.com/wmp/images/home/index/i_avatar.png" mode="aspectFill" /> -->
					</view>
				</view>

				<view class="main-cell" @click="changeName">
					<view class="main-cell-left">昵称</view>
					<view class="main-cell-right">
						<view class="right-text" v-if="postForm.nickName">
							{{ postForm.nickName }}
						</view>
						<view class="right-text" v-else>请输入昵称</view>
						<view class="right-icon"></view>
					</view>
				</view>
				<view class="main-cell" @click="changePhone">
					<view class="main-cell-left">手机号</view>
					<view class="main-cell-right">
						<view class="right-text" v-if="postForm.mobile">
							{{ postForm.mobile }}
						</view>
						<view class="right-text" v-else>请输入手机号</view>
						<view class="right-icon"></view>
					</view>
				</view>
				<view class="main-cell">
					<view class="main-cell-left">性别</view>
					<view class="main-cell-right" style="width: 300rpx;height: 45rpx;justify-content: flex-end;">
						<view class="" style="display: flex;">
							<view class="booktable-item-radios" v-for="(item,index) in bookradios" :key="index"
								@click="onChange(index)">
								<image slot="icon" :src="index === radiosCruut ? icon.active : icon.normal"
									class="bookTable-form-radio" />
								<text>{{item.text}}</text>
							</view>

						</view>
					</view>
				</view>
				<view class="main-cell" @click="toggleTimeShow" style="border: none">
					<view class="main-cell-left">生日</view>
					<view class="main-cell-right">
						<view class="right-text" v-if="postForm.birthday">
							{{ postForm.birthday }}
						</view>
						<view class="right-text" v-else>生日一经填写不得修改</view>
						<view class="right-icon"></view>
					</view>
				</view>
			</view>
		</view>
		<!-- <x-actionSheet show="{{typeShow}}" actions="{{ typeColumns }}" bind:cancel="typeCancel" bind:select="typeConfirm" /> -->
		<up-datetime-picker title="生日" :show="timeShow" v-model="selectTime" :minDate="minDate"
			:closeOnClickOverlay="true" @close="timeShow = false" mode="date" @cancel="timeCancel"
			@confirm="timeConfirm"></up-datetime-picker>
	</ls-page>
</template>

<script setup>
	import dayjs from 'dayjs';
	import setting from "@/common/config.js"; 
	import {
		ref
	} from 'vue';
	import {
		HFiveMemberAppObjProcess
	} from '@/api/public.js'
	const avatarUrl = 'https://oss.jtmckj.com/wmp/images/common/i_default_avatar.png'
	const userInfo = ref(uni.getStorageSync('userInfo'))
	const postForm = ref({})
	const timeShow = ref(false)
	const typeShow = ref(false)
	const typeText = ref('')
	const selectTime = ref(dayjs().format('YYYY-MM'))
	const icon = {
		normal: 'https://oss.jtmckj.com/wmp/images/center/my/i_radio_normal.png',
		active: 'https://oss.jtmckj.com/wmp/kbq/common/i_radio_choose.png'
	}
	const radiosCruut = ref(0)
	const bookradios = ref([{
		text: '先生',
		name: "011001"
	}, {
		text: '女士',
		name: "011002"
	}])
	onShow(() => {
		console.log(111);
		oninit()
	})
	const toggleTimeShow = () => {
		console.log(postForm.value);
		if (postForm.value.birthday) {
			uni.showToast({
				title: '生日不可修改',
				icon: 'none'
			})
			return
		}
		timeShow.value = !timeShow.value
	}

	const timeCancel = () => {
		timeShow.value = !timeShow.value
	}

	const timeConfirm = (e) => {
		console.log(e);
		console.log(dayjs(e.value).format('YYYY-MM-DD'));
		postForm.value.birthday = dayjs(e.value).format('YYYY-MM-DD')
		HFiveMemberAppObjProcess({
			functionName: 'UpdateMemberInfo_H5',
			contentData: postForm.value
		}).then(res => {
			uni.showToast({
				title: '生日填写成功',
				icon: 'none'
			})
			userInfo.value.birthday = dayjs(e.value).format('YYYY-MM-DD')
			uni.setStorageSync('userInfo', userInfo.value)
			timeShow.value = !timeShow.value
		})
	}

	const pickType = () => {
		typeShow.value = !typeShow.value
	}

	const typeCancel = () => {
		typeText.value = ''
		typeShow.value = !typeShow.value
	}

	const typeConfirm = (e) => {
		typeShow.value = !typeShow.value
	}

	const onChange = (event) => {
		radiosCruut.value = event
		postForm.value.sex = bookradios.value[event].name
		HFiveMemberAppObjProcess({
			functionName: 'UpdateMemberInfo_H5',
			contentData: postForm.value
		}).then(res => {
			uni.showToast({
				title: '性别修改成功',
				icon: 'none'
			})
			userInfo.value.sex = bookradios.value[event].name
			uni.setStorageSync('userInfo', userInfo.value)
		})
	}

	// ---------------------------------------------------------上传图片----------------------------------------------------------
	// 文件列表
	const fileList = ref([]);
	// 删除图片
	const deletePic = (event) => {
		fileList.value.splice(event.index, 1);
	};
	
	// 新增图片
	const afterRead = async (event) => {
		console.log(event)
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
	
		console.log(lists);
		const result = await uploadFilePromise(lists[0].url,lists[0].name);
		console.log(result);
		if(result){
			postForm.value.attachment = result
			HFiveMemberAppObjProcess({"functionName": "UpdateMemberInfo_H5","contentData":postForm.value})
			.then(res => {
				userInfo.value.attachment = result
			    uni.showToast({title:'更换头像成功',icon:'none'})
			    uni.setStorageSync('userInfo',userInfo.value)        
			}) 
		}

	};
	
	const uploadFilePromise = (url,name) => {
		return new Promise((resolve, reject) => {
			const path = setting.PRO_URL
			let a = uni.uploadFile({
				url: path + '/api/upload', // 仅为示例，非真实的接口地址
				filePath: url,
				name: 'data',
				formData: {
					requestId: Math.random().toString(36).substr(2, 8),
					total: 1,
					fileName: name,
					objName: 'Mini',
					orgCode: '004',
					uploadType: 'OSS',
					bucketName: 'jtmc',
				},
				success: (res) => {
					// setTimeout(() => {
					// }, 1000);
					let data = JSON.parse(res.data)
					resolve(data.content.urlPath);
				},
			});
		});
	};




	const changeName = () => {
		uni.navigateTo({
			url: './personInfoName'
		})
	}

	const changePhone = () => {
		uni.showToast({
			title: '手机号不可更换',
			icon: 'none'
		});
		return
		console.log(111);
		uni.navigateTo({
			url: './personInfoPhone'
		})
	}
	const oninit = () => {
		userInfo.value = uni.getStorageSync('userInfo')
		postForm.value = {
			mobile: userInfo.value.mobile,
			nickName: userInfo.value.name,
			sex: userInfo.value.sex,
			birthday: userInfo.value.birthday, // 修改后不能再改
			attachment: userInfo.value.attachment // 头像
		}
		radiosCruut.value = bookradios.value.findIndex(v => v.name == userInfo.value.sex)
	}
</script>

<style lang="scss" scoped>
	.centerMy-container {
		padding: 40rpx 24rpx;

		.centerMy-container-main {
			background: #ffffff;
			border-radius: 16rpx;
			padding: 0 40rpx;

			.main-cell {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid var(--maincolorbd3);

				.main-cell-left {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #666666;
					line-height: 32rpx;
					padding: 35rpx 0 34rpx;
				}

				.main-cell-right {
					display: flex;
					align-items: center;

					/* padding-top: 20rpx;*/
					.avatar-wrapper {
						padding: 0;
						background: none;
						border: none;
						margin: 0;
						background: #ffffff;
						width: 186rpx;
						height: 120rpx;
						/* padding-left: 80rpx*/
						padding: 20rpx 31rpx 0 80rpx;
						/* padding-top: 20rpx;*/
						position: relative;

						.right-img {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
						}

						.right-icon {
							position: absolute;
							right: 0rpx;
							top: 49rpx;
							width: 12rpx;
							height: 22rpx;
							background-image: url('https://oss.jtmckj.com/wmp/qnjg/common/i_icon_tra-right.png');
							background-size: 100% 100%;
							background-repeat: no-repeat;
						}
					}

					button::after {
						border: none;
					}

					.right-icon {
						margin-left: 16rpx;
						width: 12rpx;
						height: 22rpx;
						background-image: url('https://oss.jtmckj.com/wmp/qnjg/common/i_icon_tra-right.png');
						background-size: 100% 100%;
						background-repeat: no-repeat;
					}

					.right-text {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						color: var(--second--self--color);
						line-height: 32rpx;
					}

					.van-radio__label {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						color: var(--second--self--color) !important;
						line-height: 32rpx !important;
						padding-left: 12rpx;
					}

					.radio-img {
						margin-left: 20rpx;
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
		}
	}

	.right-img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.booktable-item-radios {
		display: flex;
		align-items: center;
		margin-right: 10rpx;

		text {
			margin-left: 15rpx;
		}

	}

	.booktable-item-radios:nth-child(1) {
		margin-right: 40rpx;
	}

	.bookTable-form-radio {
		width: 32rpx;
		height: 32rpx;
	}
</style>